<template>
  <div class="libsCharts">
    <div id="libsCharts" style="width: 100%; height: 280px"></div>
  </div>
</template>

<script>
export default {
  name: 'libsCharts',
  methods: {
    myEcharts () {
      const myChart = this.$echarts.init(document.getElementById('libsCharts'))
      // 配置图表
      const option = {
        color: [
          'rgba(0, 129, 255, 1)',
          'rgba(82, 212, 243, 1)',
          'rgba(93, 112, 146, 1)',
          'rgba(255, 195, 0, 1)',
          'rgba(255, 124, 0, 1)'
        ],
        tooltip: {
          trigger: 'item'
        },

        series: [
          {
            right: '40%',
            top: '10%',
            type: 'pie',
            radius: ['0%', '80%'],
            // radius: "70%", //圆形 往外突出高亮
            // radius: ['45%', '70%'], // 圆环 radius: [a, b]  （a为内圆，b为外圆）  a > b高亮时向内收缩，b>a高亮时往外突出
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            dataZoom: {
              // 放大和缩放
              type: 'inside'
            },
            emphasis: {
              disable: false, // 是否关闭扇区高亮效果
              scale: true, // 扇区是否缩放
              scaleSize: 20
              // 放大的尺寸，这里为了保证不放大扇区设置的，可要可不要
            },
            label: {
              show: false,
              position: 'center',
              normal: {
                color: 'rgba(255, 255, 255, 1)',
                show: true,
                position: 'inner', // 数值显示在内部
                formatter: '{c}' // 格式化数值百分比输出
              }
            },

            labelLine: {
              show: false
            },
            data: [
              { value: 348, name: '拣货区' },
              { value: 487, name: '出库区' },
              { value: 677, name: '暂存库区' },
              { value: 126, name: '进货暂存区' },
              { value: 298, name: '出货暂存区' }
            ]
          }
        ]
      }
      myChart.setOption(option)
    }
  },
  mounted () {
    setTimeout(() => {
      this.myEcharts()
    }, 500)
  }
}
</script>

<style></style>
